<template>
  <div class="table-view">
    <div class="flex justify-end add-btn items-center">
      <slot name="title"></slot>
      <el-button type="primary" :disabled="disabled" @click="addProduct"
        ><svg-icon icon-class="add" />新增SKU</el-button
      >
      <slot name="handle"></slot>
    </div>
    <vxe-table
      border
      show-overflow
      :data="listData"
      height="500"
      :row-config="{ height: 60 }"
      :row-class-name="rowClassName"
    >
      <vxe-column type="seq" title="序号" width="60"></vxe-column>
      <vxe-column field="sex" title="产品图片" width="80">
        <template #default="{ row }">
          <VImage
            :src="row.combination_sku_info?.attr_img"
            width="52"
            height="52"
          ></VImage>
        </template>
      </vxe-column>
      <vxe-column field="sku" title="系统SKU">
        <template #default="{ row }"> {{ row.combination_sku_info?.sku }}</template>
      </vxe-column>
      <vxe-column field="custom_sku" title="自定义SKU">
        <template #default="{ row }">
          {{ row.combination_sku_info?.custom_sku }}</template
        >
      </vxe-column>
      <vxe-column field="sku_cn_title" title="产品名称">
        <template #default="{ row }">
          {{ row.combination_sku_info?.sku_cn_title }}</template
        >
      </vxe-column>
      <vxe-column field="quantity" title="组成量" width="125">
        <template #default="{ row }">
          <template v-if="handleType == 'view'">{{ row.quantity }}</template>
          <template v-else>
            <el-input
              v-model.trim="row.quantity"
              placeholder="组成量"
              clearable
              style="width: 100px"
              :disabled="disabled"
            />
          </template>
        </template>
      </vxe-column>
      <vxe-column field="unit_price" title="采购未税报价">
        <template #default="{ row }">
          <dataAuthority
            auth="unit_price"
            :value="row.combination_sku_info.default_supplier?.unit_price || '--'"
          ></dataAuthority>
        </template>
      </vxe-column>
      <vxe-column field="purchase_untaxed_price" title="采购未税价">
        <template #default="{ row }">
          <dataAuthority
            auth="purchase_untaxed_price"
            :value="
              row.combination_sku_info.default_supplier?.purchase_untaxed_price || '--'
            "
          ></dataAuthority>
        </template>
      </vxe-column>
      <vxe-column field="unit_price_tax" title="采购含税价">
        <template #default="{ row }">
          <dataAuthority
            auth="unit_price_tax"
            :value="row.combination_sku_info.default_supplier?.unit_price_tax || '--'"
          ></dataAuthority>
        </template>
      </vxe-column>
      <vxe-column title="创建人">
        <template #default="{ row }">
          <div>{{ row.create_user_text }}</div>
          <div>{{ row.create_time }}</div>
        </template>
      </vxe-column>
      <vxe-column title="操作" fixed="right" v-if="!disabled" width="80">
        <template #default="{ rowIndex }">
          <el-button text type="danger" @click="handleDel(rowIndex)">删除</el-button>
        </template>
      </vxe-column>
    </vxe-table>
  </div>
  <selectCombinationSKU
    ref="SelectProductRef"
    :is_type="1"
    @assign="uploadSku"
    :checkedList="listData"
  >
  </selectCombinationSKU>
</template>

<script setup lang="jsx" name="groupSku">
import VImage from "@/components/Image/index.vue";
import selectCombinationSKU from "@/components/selectCombinationSKU/index.vue";
let handleType = reactive(inject("handleType"));

import { reactive } from "vue";
const props = defineProps({
  modelValue: {
    type: Array,
    default: () => [],
  },
});

const disabled = computed(() => {
  return (
    handleType.value == "view" ||
    (handleType.value == "edit" &&
      !(window.BTN_AUTH || []).includes("/goods/task/product/combination-SKU"))
  );
});

const listData = computed({
  get: () => props.modelValue,
  set: (val) => {
    emit("update:modelValue", val);
  },
});

const handleDel = (index) => {
  if (
    handleType.value == "add" ||
    handleType.value == "copy" ||
    handleType.value == "createSKU"
  ) {
    listData.value.splice(index, 1);
  } else {
    listData.value[index].delete = 1;
  }
};

const SelectProductRef = ref();
const addProduct = () => {
  nextTick(() => {
    SelectProductRef.value.open(1);
  });
};

const uploadSku = (val) => {
  const records = val.map((i, index) => {
    return {
      combination_sku_id: i.id,
      quantity: i.quantity,
      sku_id: i.id,
      combination_sku_info: {
        id: i.id,
        spu: i.spu,
        sku_id: i.id,
        sku: i.sku,
        attr_img: i.attr_img,
        custom_sku: i.custom_sku,
        sku_cn_title: i.sku_cn_title,
        is_main_attribute: i.is_main_attribute || 0,
        quantity: i.quantity,
        purchase_price: i.purchase_price,
        gross_weight_g: i.gross_weight_g,
        net_weight_g: i.net_weight_g,
        packing_weight_g: i.packing_weight_g,
        specification: i.specification,
        default_supplier: {
          unit_price: i.supplier_quotation,
          purchase_untaxed_price: i.purchase_untaxed_price,
          unit_price_tax: i.unit_price_tax,
        },
      },
    };
  });
  listData.value.push(...records);
};

const rowClassName = ({ row }) => {
  if (row.delete === 1) {
    return "hidden-row";
  }
  return "";
};
</script>

<style lang="scss" scoped>
.table-view {
  padding: 0;
  border: none;
  padding-top: -44px;
  margin-top: -34px;
  :deep(.add-btn) {
    margin-bottom: 6px;
  }
  :deep(.vxe-grid--toolbar-wrapper) {
    display: none;
  }
  :deep(.vx-table__content) {
    padding: 0;
  }
}
</style>
